<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>在线ICO图标生成器</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', Arial,
          sans-serif;
      }

      :root {
        --primary-bg: #e6e7ee;
        --secondary-bg: #ffffff;
        --shadow-light: #ffffff;
        --shadow-dark: #d1d9e6;
        --accent-color: #667eea;
        --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --success-color: #4ecdc4;
        --danger-color: #ff6b6b;
        --warning-color: #feca57;
        --text-primary: #2d3748;
        --text-secondary: #718096;
        --glass-bg: rgba(255, 255, 255, 0.25);
        --glass-border: rgba(255, 255, 255, 0.18);
      }

      body {
        background: var(--primary-bg);
        color: var(--text-primary);
        min-height: 100vh;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.3s ease;
        animation: pageLoad 0.8s ease;
      }

      @keyframes pageLoad {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .container {
        width: 100%;
        max-width: 1200px;
        background: var(--primary-bg);
        border-radius: 30px;
        padding: 40px;
        box-shadow: 20px 20px 60px var(--shadow-dark),
          -20px -20px 60px var(--shadow-light);
        margin-top: 20px;
        transition: all 0.3s ease;
        animation: containerFloat 1s ease 0.2s both;
      }

      @keyframes containerFloat {
        from {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .container:hover {
        box-shadow: 25px 25px 70px var(--shadow-dark),
          -25px -25px 70px var(--shadow-light);
      }

      header {
        text-align: center;
        margin-bottom: 40px;
        padding: 30px;
        background: var(--primary-bg);
        border-radius: 25px;
        box-shadow: 10px 10px 20px var(--shadow-dark),
          -10px -10px 20px var(--shadow-light);
        animation: headerSlide 0.8s ease 0.4s both;
      }

      @keyframes headerSlide {
        from {
          opacity: 0;
          transform: translateY(-30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      h1 {
        font-size: 3.2rem;
        margin-bottom: 15px;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
        animation: titleGlow 3s ease-in-out infinite alternate;
      }

      @keyframes titleGlow {
        from {
          filter: brightness(1);
        }
        to {
          filter: brightness(1.2);
        }
      }

      .subtitle {
        font-size: 1.3rem;
        color: var(--text-secondary);
        margin-bottom: 30px;
        font-weight: 500;
      }

      .main-panel {
        background: var(--primary-bg);
        border-radius: 25px;
        padding: 30px;
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        animation: panelsSlide 0.8s ease 0.6s both;
      }

      @keyframes panelsSlide {
        from {
          opacity: 0;
          transform: translateX(-20px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .main-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent
        );
        transition: left 0.8s;
      }

      .main-panel:hover::before {
        left: 100%;
      }

      .main-panel:hover {
        transform: translateY(-5px);
        box-shadow: 16px 16px 32px var(--shadow-dark),
          -16px -16px 32px var(--shadow-light);
      }

      .panel-title {
        font-size: 1.6rem;
        margin-bottom: 25px;
        color: var(--accent-color);
        display: flex;
        align-items: center;
        font-weight: 600;
      }

      .panel-title::before {
        content: '🎨';
        margin-right: 12px;
        font-size: 1.8rem;
        animation: iconBounce 2s ease-in-out infinite;
      }

      @keyframes iconBounce {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
      }

      .file-upload {
        border: 3px dashed var(--accent-color);
        border-radius: 25px;
        padding: 50px 40px;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        margin-bottom: 25px;
        cursor: pointer;
        background: var(--primary-bg);
        box-shadow: inset 8px 8px 16px var(--shadow-dark),
          inset -8px -8px 16px var(--shadow-light);
        position: relative;
        overflow: hidden;
      }

      .file-upload:hover {
        border-color: var(--success-color);
        transform: translateY(-5px) scale(1.02);
        box-shadow: inset 10px 10px 20px var(--shadow-dark),
          inset -10px -10px 20px var(--shadow-light),
          0 15px 40px rgba(102, 126, 234, 0.25), 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .file-upload.dragover {
        border-color: var(--success-color);
        background: rgba(78, 205, 196, 0.05);
        transform: scale(1.05);
        box-shadow: inset 12px 12px 24px var(--shadow-dark),
          inset -12px -12px 24px var(--shadow-light),
          0 20px 50px rgba(78, 205, 196, 0.3);
        animation: dragPulse 1s ease-in-out infinite;
      }

      @keyframes dragPulse {
        0%,
        100% {
          border-color: var(--success-color);
        }
        50% {
          border-color: var(--accent-color);
        }
      }

      .file-upload-content {
        position: relative;
        z-index: 1;
      }

      .file-upload-icon {
        font-size: 3.5rem;
        margin-bottom: 20px;
        display: block;
        animation: iconFloat 3s ease-in-out infinite;
        filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.2));
      }

      @keyframes iconFloat {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }

      .file-upload-text {
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 10px;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .file-upload-subtext {
        font-size: 1.1rem;
        color: var(--text-secondary);
        margin-bottom: 20px;
        font-weight: 500;
      }

      .file-upload-formats {
        font-size: 0.9rem;
        color: var(--accent-color);
        font-weight: 500;
        padding: 8px 16px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 20px;
        display: inline-block;
        margin-bottom: 20px;
      }

      .file-upload input[type='file'] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
      }

      .preview-section {
        display: none;
        margin: 30px 0;
        text-align: center;
      }

      .image-preview {
        width: 200px;
        height: 200px;
        background: var(--primary-bg);
        border-radius: 20px;
        overflow: hidden;
        margin: 0 auto 20px;
        box-shadow: inset 10px 10px 20px var(--shadow-dark),
          inset -10px -10px 20px var(--shadow-light);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .image-preview:hover {
        box-shadow: inset 12px 12px 24px var(--shadow-dark),
          inset -12px -12px 24px var(--shadow-light);
      }

      .image-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 15px;
      }

      .size-options {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        margin: 30px 0;
      }

      .size-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: var(--primary-bg);
        border-radius: 15px;
        box-shadow: 6px 6px 12px var(--shadow-dark),
          -6px -6px 12px var(--shadow-light);
        transition: all 0.3s ease;
        cursor: pointer;
        user-select: none;
      }

      .size-option:hover {
        transform: translateY(-2px);
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
      }

      .size-option input[type='checkbox'] {
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        background: var(--primary-bg);
        box-shadow: inset 4px 4px 8px var(--shadow-dark),
          inset -4px -4px 8px var(--shadow-light);
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
      }

      .size-option input[type='checkbox']:checked {
        background: var(--accent-gradient);
        box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2),
          inset -2px -2px 4px rgba(255, 255, 255, 0.2);
      }

      .size-option input[type='checkbox']:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 12px;
        font-weight: bold;
      }

      .size-option label {
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
      }

      button {
        background: var(--primary-bg);
        color: var(--text-primary);
        border: none;
        padding: 14px 28px;
        border-radius: 15px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
        font-size: 1rem;
        flex-shrink: 0;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
        position: relative;
        overflow: hidden;
      }

      button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: left 0.5s;
      }

      button:hover::before {
        left: 100%;
      }

      button:hover {
        transform: translateY(-3px);
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light);
      }

      button:active {
        transform: translateY(0);
        box-shadow: inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);
      }

      button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: 4px 4px 8px var(--shadow-dark),
          -4px -4px 8px var(--shadow-light);
      }

      .btn-primary {
        background: var(--accent-gradient);
        color: white;
        padding: 16px 32px;
        font-size: 1.1rem;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      .btn-primary:hover {
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light),
          inset 0 1px 0 rgba(255, 255, 255, 0.2),
          0 0 30px rgba(102, 126, 234, 0.3);
      }

      .btn-success {
        background: linear-gradient(
          135deg,
          var(--success-color) 0%,
          #44a08d 100%
        );
        color: white;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      .progress-container {
        margin: 30px 0;
        display: none;
        animation: progressSlide 0.8s ease 0.8s both;
      }

      @keyframes progressSlide {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .progress-bar {
        height: 16px;
        background: var(--primary-bg);
        border-radius: 20px;
        overflow: hidden;
        margin-bottom: 15px;
        box-shadow: inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);
        position: relative;
      }

      .progress-fill {
        height: 100%;
        background: var(--accent-gradient);
        width: 0%;
        transition: width 0.3s ease;
        border-radius: 20px;
        box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
        position: relative;
        overflow: hidden;
      }

      .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          transparent
        );
        animation: progressShine 2s infinite;
      }

      @keyframes progressShine {
        0% {
          left: -100%;
        }
        100% {
          left: 100%;
        }
      }

      .progress-text {
        text-align: center;
        font-size: 1rem;
        color: var(--text-secondary);
        font-weight: 500;
      }

      .actions {
        display: flex;
        justify-content: center;
        gap: 25px;
        margin-top: 30px;
        animation: actionsSlide 0.8s ease 1s both;
      }
      
      .batch-download-section {
        margin-top: 30px;
        padding: 25px;
        background: var(--primary-bg);
        border-radius: 20px;
        box-shadow: 10px 10px 20px var(--shadow-dark),
          -10px -10px 20px var(--shadow-light);
        border: 2px solid var(--accent-color);
        text-align: center;
        animation: batchSectionSlide 0.8s ease 1.1s both;
      }
      
      @keyframes batchSectionSlide {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      .batch-actions {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
      }
      
      .batch-actions button {
        min-width: 160px;
        font-size: 1.1rem;
        padding: 16px 24px;
      }

      @keyframes actionsSlide {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .result-panel {
        text-align: center;
        animation: resultPanelSlide 0.8s ease 1.2s both;
      }

      @keyframes resultPanelSlide {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .status-message {
        min-height: 35px;
        margin: 20px 0;
        color: var(--accent-color);
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 0.3s ease;
      }

      .status-message.processing {
        animation: statusPulse 1.5s ease-in-out infinite;
      }

      @keyframes statusPulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.6;
        }
      }

      .error-message {
        color: var(--danger-color);
        margin: 20px 0;
        min-height: 35px;
        font-weight: 600;
        font-size: 1.1rem;
        animation: errorShake 0.5s ease;
      }

      @keyframes errorShake {
        0%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-5px);
        }
        75% {
          transform: translateX(5px);
        }
      }

      .download-section {
        display: none;
        margin-top: 30px;
        padding: 25px;
        background: var(--primary-bg);
        border-radius: 20px;
        box-shadow: 10px 10px 20px var(--shadow-dark),
          -10px -10px 20px var(--shadow-light);
        border: 2px solid var(--success-color);
      }

      .download-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 20px;
      }

      .download-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        background: var(--primary-bg);
        border-radius: 15px;
        box-shadow: 6px 6px 12px var(--shadow-dark),
          -6px -6px 12px var(--shadow-light);
        transition: all 0.3s ease;
        border: 1px solid rgba(102, 126, 234, 0.1);
      }

      .download-item:hover {
        transform: translateY(-2px);
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
        border-color: var(--accent-color);
      }

      .download-preview {
        width: 64px;
        height: 64px;
        background: var(--primary-bg);
        border-radius: 10px;
        margin-bottom: 15px;
        box-shadow: inset 4px 4px 8px var(--shadow-dark),
          inset -4px -4px 8px var(--shadow-light);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .download-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }

      .download-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 8px;
      }

      .download-size {
        font-size: 0.9rem;
        color: var(--text-secondary);
        font-weight: 500;
        margin-bottom: 15px;
      }

      .instructions {
        background: var(--primary-bg);
        border-radius: 25px;
        padding: 30px;
        margin-top: 40px;
        box-shadow: 10px 10px 20px var(--shadow-dark),
          -10px -10px 20px var(--shadow-light);
        animation: instructionsSlide 0.8s ease 1.4s both;
      }

      @keyframes instructionsSlide {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .instructions h3 {
        color: var(--accent-color);
        margin-bottom: 20px;
        font-size: 1.4rem;
        font-weight: 600;
      }

      .instructions ol {
        padding-left: 25px;
        margin-bottom: 20px;
      }

      .instructions li {
        margin-bottom: 12px;
        line-height: 1.7;
        color: var(--text-secondary);
        font-weight: 500;
      }

      .instructions p {
        color: var(--text-secondary);
        font-style: italic;
        font-weight: 500;
        padding: 15px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 15px;
        border-left: 4px solid var(--accent-color);
      }

      footer {
        margin-top: 40px;
        text-align: center;
        color: var(--text-secondary);
        font-size: 0.95rem;
        padding: 25px;
        background: var(--primary-bg);
        border-radius: 20px;
        box-shadow: 6px 6px 12px var(--shadow-dark),
          -6px -6px 12px var(--shadow-light);
        animation: footerFade 0.8s ease 1.6s both;
      }

      @keyframes footerFade {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @media (max-width: 768px) {
        .container {
          padding: 20px;
        }
        
        h1 {
          font-size: 2.5rem;
        }
        
        .subtitle {
          font-size: 1.1rem;
        }
        
        .size-options {
          gap: 10px;
        }
        
        .size-option {
          padding: 10px 15px;
        }
        
        .download-grid {
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 15px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>🎨 ICO图标生成器</h1>
        <p class="subtitle">将任意图片转换为透明背景的ICO图标文件</p>
      </header>

      <div class="main-panel">
        <h2 class="panel-title">上传图片</h2>
        
        <div class="file-upload" id="fileUpload">
          <div class="file-upload-content">
            <span class="file-upload-icon">📁</span>
            <div class="file-upload-text">点击或拖拽上传图片</div>
            <div class="file-upload-subtext">支持透明背景的PNG图片效果最佳</div>
            <div class="file-upload-formats">支持格式: PNG, JPG, JPEG, GIF, BMP, WEBP</div>
          </div>
          <input type="file" id="imageInput" accept="image/*" />
        </div>

        <div class="preview-section" id="previewSection">
          <div class="image-preview" id="imagePreview">
            <img id="previewImg" alt="预览图片" />
          </div>
          <p>原始图片预览</p>
        </div>

        <div class="size-options">
          <h3 style="width: 100%; text-align: center; margin-bottom: 20px; color: var(--accent-color); font-weight: 600;">选择输出尺寸</h3>
          <div class="size-option">
            <input type="checkbox" id="size16" value="16" checked />
            <label for="size16">16×16</label>
          </div>
          <div class="size-option">
            <input type="checkbox" id="size32" value="32" checked />
            <label for="size32">32×32</label>
          </div>
          <div class="size-option">
            <input type="checkbox" id="size48" value="48" checked />
            <label for="size48">48×48</label>
          </div>
          <div class="size-option">
            <input type="checkbox" id="size64" value="64" checked />
            <label for="size64">64×64</label>
          </div>
          <div class="size-option">
            <input type="checkbox" id="size128" value="128" />
            <label for="size128">128×128</label>
          </div>
          <div class="size-option">
            <input type="checkbox" id="size256" value="256" />
            <label for="size256">256×256</label>
          </div>
          <div class="size-option">
            <input type="checkbox" id="size512" value="512" />
            <label for="size512">512×512</label>
          </div>
        </div>

        <div class="actions">
          <button class="btn-primary" id="generateBtn" disabled>
            🚀 生成ICO图标
          </button>
          <button id="clearBtn">🗑️ 清除重选</button>
        </div>
        
        <div class="batch-download-section" id="batchDownloadSection" style="display: none;">
          <h3 style="color: var(--accent-color); margin-bottom: 20px; text-align: center; font-size: 1.4rem;">📦 批量下载</h3>
          <div class="batch-actions">
            <button class="btn-success" onclick="icoGenerator.batchDownloadPNG()" id="batchPngBtn">
              📥 批量下载PNG
            </button>
            <button class="btn-success" onclick="icoGenerator.batchDownloadICO()" id="batchIcoBtn" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
              📦 批量下载ICO
            </button>
          </div>
        </div>

        <div class="progress-container" id="progressContainer">
          <div class="progress-bar">
            <div class="progress-fill" id="progressFill"></div>
          </div>
          <div class="progress-text" id="progressText">准备生成...</div>
        </div>

        <div class="status-message" id="statusMessage"></div>
        <div class="error-message" id="errorMessage"></div>

        <div class="download-section" id="downloadSection">
          <h3 style="text-align: center; margin-bottom: 20px; color: var(--success-color); font-weight: 600;">✅ 生成完成</h3>
          <div class="download-grid" id="downloadGrid"></div>
        </div>
      </div>

      <div class="instructions">
        <h3>📋 使用说明</h3>
        <ol>
          <li>点击上传区域或拖拽图片文件到页面中</li>
          <li>选择需要生成的ICO图标尺寸（可多选）</li>
          <li>点击"生成ICO图标"按钮开始处理</li>
          <li>等待处理完成后下载生成的ICO文件</li>
          <li>建议使用PNG格式的透明背景图片以获得最佳效果</li>
        </ol>
        <p>
          💡 提示：ICO文件包含多个尺寸的图标，适用于Windows应用程序、网站favicon等场景。
          生成的ICO文件会保持原图的透明度信息。
        </p>
      </div>

      <footer>
        <p>© 2024 ICO图标生成器 - 免费在线工具，保护您的隐私，所有处理均在本地完成</p>
      </footer>
    </div>

    <script>
      class ICOGenerator {
        constructor() {
          this.selectedImage = null;
          this.canvas = document.createElement('canvas');
          this.ctx = this.canvas.getContext('2d');
          this.initializeEventListeners();
        }

        initializeEventListeners() {
          const fileUpload = document.getElementById('fileUpload');
          const imageInput = document.getElementById('imageInput');
          const generateBtn = document.getElementById('generateBtn');
          const clearBtn = document.getElementById('clearBtn');

          // 文件上传事件
          imageInput.addEventListener('change', (e) => this.handleFileSelect(e));
          
          // 拖拽上传
          fileUpload.addEventListener('dragover', (e) => {
            e.preventDefault();
            fileUpload.classList.add('dragover');
          });
          
          fileUpload.addEventListener('dragleave', () => {
            fileUpload.classList.remove('dragover');
          });
          
          fileUpload.addEventListener('drop', (e) => {
            e.preventDefault();
            fileUpload.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
              this.handleFile(files[0]);
            }
          });

          // 生成按钮
          generateBtn.addEventListener('click', () => this.generateICO());
          
          // 清除按钮
          clearBtn.addEventListener('click', () => this.clearSelection());
        }

        handleFileSelect(event) {
          const file = event.target.files[0];
          if (file) {
            this.handleFile(file);
          }
        }

        handleFile(file) {
          // 验证文件类型
          if (!file.type.startsWith('image/')) {
            this.showError('请选择有效的图片文件');
            return;
          }

          // 验证文件大小（限制为10MB）
          if (file.size > 10 * 1024 * 1024) {
            this.showError('图片文件过大，请选择小于10MB的文件');
            return;
          }

          const reader = new FileReader();
          reader.onload = (e) => {
            const img = new Image();
            img.onload = () => {
              this.selectedImage = img;
              this.showPreview(e.target.result);
              document.getElementById('generateBtn').disabled = false;
              this.clearMessages();
            };
            img.onerror = () => {
              this.showError('图片加载失败，请选择其他图片');
            };
            img.src = e.target.result;
          };
          reader.readAsDataURL(file);
        }

        showPreview(src) {
          const previewSection = document.getElementById('previewSection');
          const previewImg = document.getElementById('previewImg');
          
          previewImg.src = src;
          previewSection.style.display = 'block';
        }

        getSelectedSizes() {
          const checkboxes = document.querySelectorAll('.size-option input[type="checkbox"]:checked');
          return Array.from(checkboxes).map(cb => parseInt(cb.value));
        }

        async generateICO() {
          if (!this.selectedImage) {
            this.showError('请先选择图片');
            return;
          }

          const selectedSizes = this.getSelectedSizes();
          if (selectedSizes.length === 0) {
            this.showError('请至少选择一个输出尺寸');
            return;
          }

          this.showProgress();
          this.clearMessages();

          try {
            // 生成不同尺寸的图标数据
            const iconData = [];
            const totalSteps = selectedSizes.length;
            
            for (let i = 0; i < selectedSizes.length; i++) {
              const size = selectedSizes[i];
              this.updateProgress((i / totalSteps) * 80, `正在生成 ${size}×${size} 图标...`);
              
              const imageData = await this.resizeImage(this.selectedImage, size);
              iconData.push({
                size: size,
                data: imageData
              });
              
              // 添加小延迟以显示进度
              await new Promise(resolve => setTimeout(resolve, 100));
            }

            this.updateProgress(90, '正在生成ICO文件...');
            
            // 生成ICO文件
            const icoBlob = this.createICOFile(iconData);
            
            this.updateProgress(100, '生成完成！');
            
            // 显示下载区域
            this.showDownloadSection(iconData, icoBlob);
            
            setTimeout(() => {
              this.hideProgress();
              this.showStatus('ICO图标生成成功！', 'success');
            }, 1000);
            
          } catch (error) {
            console.error('生成ICO失败:', error);
            this.hideProgress();
            this.showError('生成ICO文件时发生错误: ' + error.message);
          }
        }

        async resizeImage(img, size) {
          return new Promise((resolve) => {
            this.canvas.width = size;
            this.canvas.height = size;
            
            // 清除画布并设置透明背景
            this.ctx.clearRect(0, 0, size, size);
            
            // 计算缩放比例，保持宽高比
            const scale = Math.min(size / img.width, size / img.height);
            const scaledWidth = img.width * scale;
            const scaledHeight = img.height * scale;
            
            // 居中绘制
            const x = (size - scaledWidth) / 2;
            const y = (size - scaledHeight) / 2;
            
            this.ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
            
            // 获取图像数据
            const imageData = this.ctx.getImageData(0, 0, size, size);
            resolve(imageData);
          });
        }

        createICOFile(iconData) {
          // ICO文件格式实现
          const iconCount = iconData.length;
          
          // 计算文件大小
          let totalSize = 6 + (iconCount * 16); // 文件头 + 目录项
          const pngData = [];
          
          iconData.forEach(icon => {
            // 将ImageData转换为PNG
            this.canvas.width = icon.size;
            this.canvas.height = icon.size;
            this.ctx.putImageData(icon.data, 0, 0);
            
            const pngDataUrl = this.canvas.toDataURL('image/png');
            const pngBytes = this.dataURLToBytes(pngDataUrl);
            pngData.push(pngBytes);
            totalSize += pngBytes.length;
          });
          
          // 创建ICO文件缓冲区
          const buffer = new ArrayBuffer(totalSize);
          const view = new DataView(buffer);
          let offset = 0;
          
          // ICO文件头
          view.setUint16(0, 0, true);      // 保留字段
          view.setUint16(2, 1, true);      // 图像类型 (1=ICO)
          view.setUint16(4, iconCount, true); // 图像数量
          offset = 6;
          
          // 目录项
          let dataOffset = 6 + (iconCount * 16);
          for (let i = 0; i < iconCount; i++) {
            const icon = iconData[i];
            const pngSize = pngData[i].length;
            
            view.setUint8(offset, icon.size === 256 ? 0 : icon.size); // 宽度
            view.setUint8(offset + 1, icon.size === 256 ? 0 : icon.size); // 高度
            view.setUint8(offset + 2, 0);    // 颜色数
            view.setUint8(offset + 3, 0);    // 保留
            view.setUint16(offset + 4, 1, true); // 颜色平面
            view.setUint16(offset + 6, 32, true); // 位深度
            view.setUint32(offset + 8, pngSize, true); // 数据大小
            view.setUint32(offset + 12, dataOffset, true); // 数据偏移
            
            offset += 16;
            dataOffset += pngSize;
          }
          
          // 图像数据
          for (let i = 0; i < iconCount; i++) {
            const pngBytes = pngData[i];
            const uint8View = new Uint8Array(buffer, offset, pngBytes.length);
            uint8View.set(pngBytes);
            offset += pngBytes.length;
          }
          
          return new Blob([buffer], { type: 'image/x-icon' });
        }

        dataURLToBytes(dataURL) {
          const base64 = dataURL.split(',')[1];
          const binaryString = atob(base64);
          const bytes = new Uint8Array(binaryString.length);
          for (let i = 0; i < binaryString.length; i++) {
            bytes[i] = binaryString.charCodeAt(i);
          }
          return bytes;
        }

        showDownloadSection(iconData, icoBlob) {
          const downloadSection = document.getElementById('downloadSection');
          const downloadGrid = document.getElementById('downloadGrid');
          
          // 保存生成的图标数据供批量下载使用
          this.generatedIcons = iconData.map(icon => ({
            size: icon.size,
            imageData: icon.data
          }));
          
          downloadGrid.innerHTML = '';
          
          // 添加完整ICO文件下载
          const icoItem = document.createElement('div');
          icoItem.className = 'download-item';
          
          const icoPreview = document.createElement('div');
          icoPreview.className = 'download-preview';
          icoPreview.innerHTML = '🎯';
          icoPreview.style.fontSize = '32px';
          icoPreview.style.color = 'var(--accent-color)';
          
          const icoTitle = document.createElement('div');
          icoTitle.className = 'download-title';
          icoTitle.textContent = 'ICO图标文件';
          
          const icoSize = document.createElement('div');
          icoSize.className = 'download-size';
          icoSize.textContent = `${(icoBlob.size / 1024).toFixed(1)} KB`;
          
          const icoBtn = document.createElement('button');
          icoBtn.className = 'btn-success';
          icoBtn.textContent = '💾 下载ICO';
          icoBtn.onclick = () => this.downloadFile(icoBlob, 'icon.ico');
          
          icoItem.appendChild(icoPreview);
          icoItem.appendChild(icoTitle);
          icoItem.appendChild(icoSize);
          icoItem.appendChild(icoBtn);
          
          downloadGrid.appendChild(icoItem);
          
          // 添加各个尺寸的PNG预览
          iconData.forEach(icon => {
            const item = document.createElement('div');
            item.className = 'download-item';
            
            const preview = document.createElement('div');
            preview.className = 'download-preview';
            
            // 创建预览图
            this.canvas.width = icon.size;
            this.canvas.height = icon.size;
            this.ctx.putImageData(icon.data, 0, 0);
            
            const previewImg = document.createElement('img');
            previewImg.src = this.canvas.toDataURL('image/png');
            preview.appendChild(previewImg);
            
            const title = document.createElement('div');
            title.className = 'download-title';
            title.textContent = `${icon.size}×${icon.size}`;
            
            const size = document.createElement('div');
            size.className = 'download-size';
            const pngDataUrl = this.canvas.toDataURL('image/png');
            const pngBlob = this.dataURLToBlob(pngDataUrl);
            size.textContent = `${(pngBlob.size / 1024).toFixed(1)} KB`;
            
            const buttonContainer = document.createElement('div');
            buttonContainer.style.display = 'flex';
            buttonContainer.style.gap = '8px';
            buttonContainer.style.justifyContent = 'center';
            
            const pngBtn = document.createElement('button');
            pngBtn.textContent = '📥 PNG';
            pngBtn.onclick = () => this.downloadFile(pngBlob, `icon_${icon.size}x${icon.size}.png`);
            
            const icoSingleBtn = document.createElement('button');
            icoSingleBtn.textContent = '🎯 ICO';
            icoSingleBtn.style.background = 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)';
            icoSingleBtn.onclick = () => this.downloadSingleICO(icon);
            
            buttonContainer.appendChild(pngBtn);
            buttonContainer.appendChild(icoSingleBtn);
            
            item.appendChild(preview);
            item.appendChild(title);
            item.appendChild(size);
            item.appendChild(buttonContainer);
            
            downloadGrid.appendChild(item);
          });
          
          downloadSection.style.display = 'block';
          document.getElementById('batchDownloadSection').style.display = 'block';
        }

        dataURLToBlob(dataURL) {
          const arr = dataURL.split(',');
          const mime = arr[0].match(/:(.*?);/)[1];
          const bstr = atob(arr[1]);
          let n = bstr.length;
          const u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], { type: mime });
        }

        downloadFile(blob, filename) {
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = filename;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
        }

        downloadSingleICO(iconData) {
          // 创建单个尺寸的ICO文件
          const singleIconData = [iconData];
          const icoBlob = this.createICOFile(singleIconData);
          this.downloadFile(icoBlob, `icon_${iconData.size}x${iconData.size}.ico`);
        }
        
        // 批量下载PNG文件
        batchDownloadPNG() {
          if (!this.generatedIcons || this.generatedIcons.length === 0) {
            alert('请先生成图标！');
            return;
          }
          
          this.generatedIcons.forEach((iconData, index) => {
            setTimeout(() => {
              const canvas = document.createElement('canvas');
              canvas.width = iconData.size;
              canvas.height = iconData.size;
              const ctx = canvas.getContext('2d');
              ctx.putImageData(iconData.imageData, 0, 0);
              
              canvas.toBlob(blob => {
                this.downloadFile(blob, `icon_${iconData.size}x${iconData.size}.png`);
              }, 'image/png');
            }, index * 200); // 延迟下载避免浏览器阻止
          });
        }
        
        // 批量下载ICO文件
        batchDownloadICO() {
          if (!this.generatedIcons || this.generatedIcons.length === 0) {
            alert('请先生成图标！');
            return;
          }
          
          this.generatedIcons.forEach((iconData, index) => {
            setTimeout(() => {
              const singleIconData = [{
                size: iconData.size,
                data: iconData.imageData
              }];
              const icoBlob = this.createICOFile(singleIconData);
              this.downloadFile(icoBlob, `icon_${iconData.size}x${iconData.size}.ico`);
            }, index * 200); // 延迟下载避免浏览器阻止
          });
        }

        showProgress() {
          document.getElementById('progressContainer').style.display = 'block';
        }

        hideProgress() {
          document.getElementById('progressContainer').style.display = 'none';
        }

        updateProgress(percent, text) {
          document.getElementById('progressFill').style.width = percent + '%';
          document.getElementById('progressText').textContent = text;
        }

        showStatus(message, type = 'info') {
          const statusEl = document.getElementById('statusMessage');
          statusEl.textContent = message;
          statusEl.className = 'status-message';
          if (type === 'processing') {
            statusEl.classList.add('processing');
          }
        }

        showError(message) {
          const errorEl = document.getElementById('errorMessage');
          errorEl.textContent = message;
          setTimeout(() => {
            errorEl.textContent = '';
          }, 5000);
        }

        clearMessages() {
          document.getElementById('statusMessage').textContent = '';
          document.getElementById('errorMessage').textContent = '';
        }

        clearSelection() {
          this.selectedImage = null;
          document.getElementById('imageInput').value = '';
          document.getElementById('previewSection').style.display = 'none';
          document.getElementById('downloadSection').style.display = 'none';
          document.getElementById('batchDownloadSection').style.display = 'none';
          document.getElementById('generateBtn').disabled = true;
          this.hideProgress();
          this.clearMessages();
          this.generatedIcons = null;
        }
      }

      // 初始化应用
      let icoGenerator;
      document.addEventListener('DOMContentLoaded', () => {
        icoGenerator = new ICOGenerator();
      });
    </script>
  </body>
</html>